import React, { useState, useEffect } from 'react';
import "./index.css"
import {
  AlignCenterOutlined,
  UserOutlined,
  DoubleRightOutlined,
  LeftOutlined,
  RightOutlined
} from '@ant-design/icons';
import { Avatar, Space, Layout, Menu, theme, Drawer, Button } from 'antd';
import NewRouter from '../components/newRouter/NewRouter';
import DevDetail from './deviceOperate/deviceNew/DevDetail';
import DevDetail1 from './deviceManage/devInfo/DevDetail';
import DevMonitorConentHeader from './deviceManage/devMonitor/ConentHeader';
import earth from "../icon/地球.png"
import { ConfigProvider } from 'antd';
import { connect } from "react-redux"
import task from "../icon/任务.png"
const { Header, Content, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem('个人工作台', '/workbench', <AlignCenterOutlined />),
  getItem('设备运营', '/devoperate', <AlignCenterOutlined />, [
    getItem('设备新建', '/devoperate/devnew', <AlignCenterOutlined />),
    getItem('设备安装', '/devoperate/devinstall', <AlignCenterOutlined />),
    getItem('设备验收', '/devoperate/devcheck', <AlignCenterOutlined />),
    getItem('设备检修', '/devoperate/devmaintain', <AlignCenterOutlined />),
    getItem('设备退运', '/devoperate/devdown', <AlignCenterOutlined />),
  ]),
  getItem('设备管理', '/devmanage', <AlignCenterOutlined />, [
    getItem('设备档案', '/devmanage/devinfo', <AlignCenterOutlined />),
    getItem('设备监测', '/devmanage/devmonitor', <AlignCenterOutlined />),
  ]),
  getItem('物联卡管理', '/cardmanage', <AlignCenterOutlined />, [
    getItem('物联卡档案', '/cardmanage/cardinfo', <AlignCenterOutlined />),
    getItem('物联卡监测', '/cardmanage/cardmonitor', <AlignCenterOutlined />),
  ]),
  getItem('指标管理', '/targetmanage', <AlignCenterOutlined />, [
    getItem('指标看板', '/targetmanage/infoboard', <AlignCenterOutlined />),
  ]),
  getItem('资料管理', '/materialmanage', <AlignCenterOutlined />, [
    getItem('资料列表', '/materialmanage/materialist', <AlignCenterOutlined />),
  ]),
  getItem('运维工具', '/operation', <AlignCenterOutlined />, [
    getItem('APP批量管理', '/operation/app', <AlignCenterOutlined />),
    getItem('设备运行诊断', '/operation/devdiagnosis', <AlignCenterOutlined />),
    getItem('智能采集', '/operation/collect', <AlignCenterOutlined />),
  ]),
  getItem('个人工作台_体验版', '/workbenchex', <AlignCenterOutlined />),
];

function Index(props) {
  const [height, setHeight] = useState(0);
  const [translateX, setTranslateX] = useState(0);
  const [isNone, setIsNone] = useState(0);
  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    setHeight(h);
  };
  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    setHeight(h)

    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  }, []);
  var pathname = props.location.pathname.split("/")
  var tab = { label: "个人工作台", key: "/workbench" }
  items.map(item => {
    if (item.key === "/" + pathname[1]) {
      if (item.children) {
        item.children.map(it => {
          if (it.key === props.location.pathname)
            tab = it
        })
      } else {
        tab = item
      }

    }
  })

  const [item, setItem] = useState([{ "title": tab.label, "isSelect": true, "url": tab.key }])

  const [pathUrl, setPathUrl] = useState([props.location.pathname === "/" ? "/workbench" : props.location.pathname])

  const {
    token: { colorBgContainer },
  } = theme.useToken();
  //添加多标签
  const menuClick = (e) => {
    props.history.push(e.key)
    setPathUrl(e.key)
    var isExist = false
    for (var i = 0; i < item.length; i++) {
      if (item[i].title === e.domEvent.target.innerHTML) {
        isExist = true
      }
    }
    if (isExist) {
      setItem([...item.filter(it => {
        it.isSelect = false
        if (it.title === e.domEvent.target.innerHTML) {
          it.isSelect = true
        }
        return it
      }
      )])
    } else {
      setItem([...item.filter(it => {
        it.isSelect = false
        return it
      }
      ), { "title": e.domEvent.target.innerHTML, "isSelect": true, "url": e.key }])
    }
  }
  //删除多标签
  const deleteItem = (e) => {
    var baseUrl = e.target.baseURI.split("#")
    var isNow = false
    var arr = item.filter(it => {
      return it.url !== e.target.id
    })
    if (e.target.id === baseUrl[baseUrl.length - 1]) {
      isNow = true
    }
    if (isNow) {
      if (arr.length !== 0) {
        arr[arr.length - 1].isSelect = true
        props.history.push(arr[arr.length - 1].url)

        setPathUrl(arr[arr.length - 1].url)
      } else {
        props.history.push("/workbench")
        setPathUrl("/workbench")
      }
    }
    setItem(arr)
  }
  //多标签切换
  const changePath = (e) => {
    props.history.push(e.target.id)
    setPathUrl(e.target.id)
    setItem([...item.filter(it => {
      it.isSelect = false
      if (it.url === e.target.id) {
        it.isSelect = true
      }
      return it
    }
    )])
  }
  const onClose = () => {
    props.showDrawer()
  };
  const changeTranslateX = (type) => {
    if (type === "right") {
      setTranslateX(translateX - 80)
    } else {
      setTranslateX(translateX + 80)
    }

  }
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}

    >
      <Sider style={{ backgroundColor: "black", }}>
        <div className="demo-logo-vertical sideTitle" >
          <img src={earth} alt="earth" className="sideLogo" />
          <span>物联管理平台</span>
        </div>
        <Menu theme="dark" selectedKeys={pathUrl} mode="inline" items={items} onClick={(e) => menuClick(e)} style={{ backgroundColor: "black", fontSize: "12px", }} />
      </Sider>
      <Layout style={{ background: "#f5f4f4" }}>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
            height: "55px",
            lineHeight: "55px",
          }}
        >
          <span className='headerTitle'>
            运营微门户
          </span>
          <div className='headerUser'>
            <Space size={10} wrap>
              <Avatar icon={<UserOutlined />} />
              <span style={{ fontSize: "16px" }}>张三</span>
            </Space>
          </div>

        </Header>

        <Content style={{ position: 'relative' }}>
          <hr style={{ opacity: "0.4" }}></hr>
          <div className='tabDiv' style={{
            display: "flex"
          }}>
            <div style={{
              flex: "0 0 20px", padding: "0 10px 0 0", textAlign: 'center', color: "gray",
              fontSize: "10px", visibility: document.documentElement.clientWidth < 1765 ? item.length > 12 ? "visible" : "hidden" : "hidden"
            }}
              onClick={() => changeTranslateX("left")}>
              <LeftOutlined /></div>
            <div style={{ flex: "1 1 320px", overflow: "hidden", whiteSpace: "nowrap", }}>
              <div style={{
                transform: `translateX(${translateX}px)`,
                transition: "all 0.3s linear",
              }}>
                {item.map(it => {
                  return (
                    <span className='tabSpan' key={it.url} style={{
                      backgroundColor: it.isSelect ? "#1FBBA9" : "white",
                      color: it.isSelect ? "white" : "#7a7a7a",

                    }}>
                      <span id={it.url} onClick={(e) => changePath(e)} >
                        {it.title}
                      </span>
                      <span id={it.url} style={{ margin: "0 0 0 5px" }} onClick={(e) => deleteItem(e)}>×</span>
                    </span>
                  )
                })}
              </div>

            </div>
            <div style={{
              flex: "0 0 20px", padding: "0 0 0 10px", textAlign: 'center', color: "gray",
              fontSize: "10px", visibility: document.documentElement.clientWidth < 1765 ? item.length > 12 ? "visible" : "hidden" : "hidden"
            }}
              onClick={() => changeTranslateX("right")}>
              <RightOutlined /></div>
          </div >

          <div
            style={{
              // padding: "0 0 20px 0",
              // background: colorBgContainer,
              borderRadius: "5px",
              // height: document.documentElement.clientHeight - 140,
              margin: '15px 15px 0 15px',
            }}
          >
            <ConfigProvider
              theme={{
                components: {
                  Tabs: {
                    colorPrimary: '#1FBBA9',
                    colorPrimaryHover: '#1FBBA9'
                  },
                  Input: {
                    colorPrimaryHover: '#1FBBA9'
                  },
                  Button: {
                    colorPrimaryHover: '#1FBBA9',
                  },
                  Select: {
                    colorPrimaryHover: '#1FBBA9'
                  },
                  Pagination: {
                    colorPrimaryHover: '#1FBBA9',
                  },
                  Checkbox: {
                    colorPrimary: '#1FBBA9',
                    colorPrimaryHover: '#1FBBA9'
                  },
                  DatePicker: {
                    colorPrimary: '#1FBBA9',
                    colorPrimaryHover: '#1FBBA9'
                  },
                  Radio: {
                    colorPrimary: '#1FBBA9',
                    colorPrimaryHover: '#1FBBA9'
                  },
                  Upload: {
                    colorPrimary: '#1FBBA9',
                    colorPrimaryHover: '#1FBBA9'
                  }

                },
              }}
            >
              <NewRouter />
              <Drawer
                title={
                  <Space size={1} style={{ fontSize: '15px' }}>
                    <img src={task} alt="earth" />
                    <span>{props.row.devicename ? props.row.devicename : ""}</span>
                  </Space>
                }
                width="85%"
                placement="right"
                closable={false}
                open={props.openDrawer}
                getContainer={false}
                onClose={onClose}
                extra={
                  <Space>
                    <Button size='small' style={{ borderRadius: '1px', borderColor: "#1FBBA9" }} onClick={onClose}><DoubleRightOutlined style={{ color: '#1FBBA9' }} /></Button>
                  </Space>
                }
                headerStyle={{ padding: "8px", height: "60px" }}
                style={{ borderTopLeftRadius: "5px", borderBottomLeftRadius: "5px" }}
              >
                {
                  props.drawerType === "devInfo_devDetail" ? <DevDetail1 /> : <DevDetail />
                }
              </Drawer>
            </ConfigProvider>
          </div>
        </Content>

      </Layout>
    </Layout >
  );
}

const mapStateToProps = ({ IsDrawerOpen: { openDrawer, row, drawerType } }) => ({
  openDrawer, row, drawerType
})
const mapDispatchToProps = {
  showDrawer() {
    return {
      type: "change_drawerOpen",
      openDrawer: false,
      row: {},
      drawerType: ""
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index);
